<template>
  <div class='container'>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品信息" name="first">
        <div class='app-row m-20-t'>
          <span class="title bold width-120">门店名称:</span>
          <el-input class='flex-1' v-model="name_value"></el-input>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100">店铺封面:</span>
          <el-upload
            class="upload-demo"
            :action="save_file_url"
            :on-preview="open_preview"
            :file-list="file_list"
            :on-success="get_img_id"
            list-type="picture-card"
            name="imgFile"
            multiple  
            :limit='1'>
            <i class="el-icon-plus"></i>
            <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
          </el-upload>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100">店铺类型:</span>
          <el-select class='flex-1' v-model="shop_category_value" placeholder="请选择" @change="choose_shop_category">
            <el-option
              v-for="item in shop_category_list"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </div>
        <div class='app-row m-20-t'>
          <span class="title bold width-140 ">是否是中心店:</span>
          <el-radio v-model="is_vip_radio" :label="0">否</el-radio>     
          <el-radio v-model="is_vip_radio" :label="1">是</el-radio>     
        </div>
        <div class='app-row m-20-t'>
          <span class="title bold width-120">门店地址:</span>
          <el-input class='flex-1' v-model="address_value"></el-input>
        </div>

        <div class='app-row m-20-t'>
          <span class="title bold width-120">门店联系电话:</span>
          <el-input class='flex-1' v-model="phone_value"></el-input>
        </div>
        <div class='app-row m-20-t'>
          <span class="title bold width-120">营业时间:</span>
          <el-input class='flex-1' v-model="opening_hours_value"></el-input>
        </div>
        <div class='app-row m-20-t'>
          <span class="title bold width-120">人均消费:</span>
          <el-input class='flex-1' v-model="average_value"></el-input>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100">分销员:</span>
          <el-select class='flex-1' v-model="recommend_value_grade_1" placeholder="请选择分销员" @change="choose_expert_grade_1">
            <el-option
              v-for="item in experts_list_grade_1"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100">门店店长:</span>
          <el-select class='flex-1' v-model="recommend_value_grade_11" placeholder="请选择门店店长" @change="choose_expert_grade_11">
            <el-option
              v-for="item in experts_list_grade_11"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100">商圈:</span>
          <el-select class='flex-1' v-model="biz_value" placeholder="请选择" @change="choose_biz">
            <el-option
              v-for="item in biz_list"
              :key="item.id"
              :value="item.id"
              :label="item.title">
            </el-option>
          </el-select>
        </div>

      </el-tab-pane>
      <el-tab-pane label="描述" name="second">
        <div class='app-row m-30-t'>
          <span class="title bold align-right width-150 ">店铺详情文字:</span>
          <el-input type="textarea" class='m-50-l flex-1' :rows="4" placeholder="请输入内容" v-model="text_detail"></el-input>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold align-right width-150">店铺详情图片:</span>

          <el-upload
            class="upload-demo"
            :action="save_file_url_detail"
            :on-preview="open_preview"
            :on-remove="handle_remove_detail"
            :file-list="file_list_detail"
            :on-success="get_img_id_detail"
            list-type="picture-card"
            name="imgFile"
            multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="add_button">添加门店</el-button>
    </div>
    <el-dialog 
      :visible.sync="if_open_preview_dialog"
      width="30%">
      <img width="100%" :src="target_image_preview_url" alt="">
    </el-dialog>
  </div>

</template>

<script>
  import biz_base_request from "@/api/biz_base_request"
  import experts_request from "@/api/experts_request"
  import host_one from "@/api/host/host"
  import shop_category_request from "@/api/shop_category_request"
  import shop_request from "@/api/shop_request"
  export default {
    name: 'shop_list_add',
    data() {
      return {
        address_value: '',
        phone_value: '',
        name_value: "",
        activeName: 'first',
        opening_hours_value: "",
        text_detail: '',
        average_value: "",
        save_file_url: '',
        save_file_url_detail: '',
        target_img_url: '',
        target_image_preview_url: [],
        file_list: [],
        file_list_detail: [],
        recommend_value_grade_1: '',
        recommend_value_grade_11: '',
        expert_id_grade_1: '',
        expert_id_grade_11: '',
        experts_list_grade_1:[],
        experts_list_grade_11:[],
        listLoading: false,
        biz_id: '',
        biz_list: [],
        biz_value: "",
        shop_category_list: [],
        shop_category_id: 0,
        shop_manager_value: '',
        shop_category_value: "",
        if_open_preview_dialog: false,
        img_id_list_detail: [],
        is_vip_radio: 0,
      }
    },
    created() {
      this.save_file_url = host_one + '/uploadfile'
      this.get_experts_list_grade_1()
      this.get_experts_list_grade_11()
      this.get_biz_base_list()
      this.get_shop_category_list()
      this.save_file_url_detail = host_one + '/uploadfile?dir=shop'
    },
    mounted() {
  
    },
    methods: {
      choose_shop_category(e) {
        this.shop_category_id = e
      },
      choose_expert_grade_1(e) {
        this.expert_id_grade_1 = e
      },
      choose_expert_grade_11(e) {
        this.expert_id_grade_11 = e
      },
      choose_biz(e) {
        this.biz_id = e
      },
      // 添加商品详情图片
      handle_remove_detail(file,file_list_detail) {
        this.img_id_list_detail = file_list_detail
      },
      get_img_id_detail(res,file,file_list_detail) {
        this.img_id_list_detail = file_list_detail
      },
      get_detail_photo_id_list() {
        let detail_photo_id_list =[] 
        for (let i of this.img_id_list_detail) {
          detail_photo_id_list.push(i.response.data.id)
        }
        return detail_photo_id_list
      },
      check_necessary_value() {
        if (this.name_value == '') {
          this.$message.error("请输入门店名称")
          return
        }
        if (this.target_img_url == '') {
          this.$message.error("请上传至少一张图片")
          return
        } 
        return true
      },
      open_preview(file) {
        this.if_open_preview_dialog = true
        this.target_image_preview_url=file.url
      },
      add_button() {
        let if_necessary_value = this.check_necessary_value()
        if (!if_necessary_value) {
          return
        }
        let params = {
          true_name: this.name_value,
          // seller_name: "tianhe01",
          // password: "tianhe01",
          // mobile: this.phone_value,
          // province: "0",
          // city: "0",
          // area: "0",
          phone: this.phone_value,
          address: this.address_value,
          logo: this.target_img_url,
          eid: this.expert_id_grade_1,
          shop_master: this.expert_id_grade_11,
          is_vip: this.is_vip_radio,
          biz_id: this.biz_id,
          category: this.shop_category_id,
          detail_photo: this.get_detail_photo_id_list(),
          ext_content: {
            opening_hours: this.opening_hours_value,
            average:this.average_value,
            description: this.text_detail,

          },
        }
        shop_request.add_shop(params, res=> {
          this.$router.push('/shop/shop_list')

        })
      },
      get_img_id(res,file,file_list) {
        console.log(file_list);
        // this.img_id_list = file_list
        this.target_img_url = file_list[0].response.data.url
        
      },

      get_experts_list_grade_1() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          grade: 1,
          // name: this.keyword
        }
        experts_request.experts_list(params, res=> {
          this.listLoading = false,
          this.experts_list_grade_1 = res.data
        })
      },
      get_experts_list_grade_11() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          grade: 11,
          // name: this.keyword
        }
        experts_request.experts_list(params, res=> {
          this.listLoading = false,
          this.experts_list_grade_11 = res.data
        })
      },
      get_biz_base_list() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          // name: this.keyword
        }
        biz_base_request.biz_base_list(params, res=> {
          this.listLoading = false,
          this.biz_list = res.data
        })
      },
      get_shop_category_list() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          // name: this.keyword
        }
        shop_category_request.shop_category_list(params, res=> {
          this.listLoading = false,
          this.shop_category_list = res.data
        })
      },
      handleClick(tab, event) {
        
      },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>